<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 选择图片 -->
    <input type="file" class="upload">
    <img src="" alt="" class="my-img">

    <script src="./JS/axios.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
    <script>
        // 文件选择元素 change改变事件
        document.querySelector('.upload').addEventListener('change', e => {
            // 获取文件列表
            console.log(e.target.files[0]);
            // 使用FormData 携带文件图片
            const fd = new FormData()
            // 追加
            fd.append('img', e.target.files[0])
            // 提交到服务器 获取url网址
            axios({
                url: 'http://hmajax.itheima.net/api/uploadimg',
                method: 'POST',
                data: fd
            }).then(res => {
                console.log(res);
                // 取出图片获取url网址
                const imgUrl = res.data.data.url
                document.querySelector('.my-img').src = imgUrl
            })
        })
    </script>
</body>

</html>